<script setup>
import { ref } from 'vue';

// 单选题1：选项与答案
const radioOptions1 = [
  { label: 'A、化学反应', value: 'A' },
  { label: 'B、物理反应', value: 'B' },
  { label: 'C、广电反应', value: 'C' },
  { label: 'D、分解反应', value: 'D' },
];
const radioAnswer1 = ref('');

// 单选题2：选项与答案
const radioOptions2 = [
  { label: 'A、氧化反应', value: 'A' },
  { label: 'B、化合反应', value: 'B' },
  { label: 'C、聚合反应', value: 'C' },
  { label: 'D、连锁反应', value: 'D' },
];
const radioAnswer2 = ref('');

// 多选题1：选项与答案
const checkboxOptions1 = [
  { label: 'A、生产资料', value: 'A' },
  { label: 'B、劳动对象', value: 'B' },
  { label: 'C、技术水平', value: 'C' },
  { label: 'D、劳动力', value: 'D' },
  { label: 'E、艺术价值', value: 'E' },
];
const checkboxAnswers1 = ref([]);

// 多选题2：选项与答案
const checkboxOptions2 = [
  { label: 'A、加强技术', value: 'A' },
  { label: 'B、科技强省', value: 'B' },
  { label: 'C、创业富民', value: 'C' },
  { label: 'D、创新性省份', value: 'D' },
];
const checkboxAnswers2 = ref([]);

// 填空题1：答案
const blankAnswer1 = ref('');

// 处理单选题选择
const handleRadioChange = (questionIndex, e) => {
  if (questionIndex === 1) {
    radioAnswer1.value = e.detail.value;
  } else if (questionIndex === 2) {
    radioAnswer2.value = e.detail.value;
  }
};

// 处理多选题选择
const handleCheckboxChange = (questionIndex, e) => {
  if (questionIndex === 1) {
    checkboxAnswers1.value = e.detail.value;
  } else if (questionIndex === 2) {
    checkboxAnswers2.value = e.detail.value;
  }
};

// 提交测试
const submitTest = () => {
  // 这里可以写提交答案到后端的逻辑，如 uni.request 发请求
  uni.showToast({
    title: '提交成功',
    icon: 'success',
  });
  console.log('单选题1答案：', radioAnswer1.value);
  console.log('单选题2答案：', radioAnswer2.value);
  console.log('多选题1答案：', checkboxAnswers1.value);
  console.log('多选题2答案：', checkboxAnswers2.value);
  console.log('填空题1答案：', blankAnswer1.value);
};

// 保存记录
const saveRecord = () => {
  // 这里可以写本地存储答案的逻辑，如 uni.setStorage
  uni.setStorage({
    key: 'testRecord',
    data: {
      radioAnswer1: radioAnswer1.value,
      radioAnswer2: radioAnswer2.value,
      checkboxAnswers1: checkboxAnswers1.value,
      checkboxAnswers2: checkboxAnswers2.value,
      blankAnswer1: blankAnswer1.value,
    },
    success: () => {
      uni.showToast({
        title: '记录保存成功',
        icon: 'success',
      });
    },
  });
};
</script>

<template>
  <view class="test-page">
    <!-- 提示语 -->
    <view class="tip">
      对知识掌握的牢固程度以及理解分析信息和解决问题的能力，可以更好地启发头脑，指导实践推动工作。
    </view>

    <!-- 单选题 -->
    <view class="question-group">
      <view class="group-title">一、单选题</view>
      <view class="question">
        <view class="question-content">1. 燃烧是一种发光的（）</view>
        <radio-group @change="handleRadioChange(1)">
          <label class="radio-item" v-for="(option, index) in radioOptions1" :key="index">
            <radio :value="option.value" :checked="radioAnswer1 === option.value" />{{ option.label }}
          </label>
        </radio-group>
      </view>

      <view class="question">
        <view class="question-content">2. 燃烧过程中的化学反应十分复杂，有（），有分解反应。</view>
        <radio-group @change="handleRadioChange(2)">
          <label class="radio-item" v-for="(option, index) in radioOptions2" :key="index">
            <radio :value="option.value" :checked="radioAnswer2 === option.value" />{{ option.label }}
          </label>
        </radio-group>
      </view>
    </view>

    <!-- 多选题 -->
    <view class="question-group">
      <view class="group-title">二、多选题</view>
      <view class="question">
        <view class="question-content">1. 生产力构成要素包括（）</view>
        <checkbox-group @change="handleCheckboxChange(1)">
          <label class="checkbox-item" v-for="(option, index) in checkboxOptions1" :key="index">
            <checkbox :value="option.value" :checked="checkboxAnswers1.includes(option.value)" />{{ option.label }}
          </label>
        </checkbox-group>
      </view>

      <view class="question">
        <view class="question-content">2. 2008年浙江省提出了（）口号</view>
        <checkbox-group @change="handleCheckboxChange(2)">
          <label class="checkbox-item" v-for="(option, index) in checkboxOptions2" :key="index">
            <checkbox :value="option.value" :checked="checkboxAnswers2.includes(option.value)" />{{ option.label }}
          </label>
        </checkbox-group>
      </view>
    </view>

    <!-- 填空题 -->
    <view class="question-group">
      <view class="group-title">三、填空题</view>
      <view class="question">
        <view class="question-content">1. 曾子所著，专讲古代大学教育的是</view>
        <input type="text" v-model="blankAnswer1" placeholder="请输入答案" class="blank-input" />
      </view>
    </view>

    <!-- 提交按钮 -->
    <button type="primary" @click="submitTest">立即提交</button>
    <button type="default" @click="saveRecord">保存记录</button>
  </view>
</template>

<style scoped>
.test-page {
  padding: 16px;
  background-color: #fff;
}
.tip {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}
.group-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
.question {
  margin-bottom: 20px;
}
.question-content {
  margin-bottom: 8px;
  font-size: 15px;
}
.radio-item,
.checkbox-item {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}
.blank-input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
button {
  margin-top: 10px;
}
</style>

